<template>
  <div class="table-container">
    <el-table
      style="width: 98%; margin: auto;border: 1px solid #474D55;"
      :data="tableData"
      :header-cell-style="{
            color: '#fff',
            background: '#2C2D32',
            fontSize: '14px',
            borderColor:'#474D55'
          }">
      <el-table-column v-for="(item,index) in tableColumn" :key="index"
                       :prop="item.prop"
                       :label="item.label"
                       :minWidth="item.minWidth"
                       :maxWidth="item.maxWidth"
      >
        <template slot-scope="scope">
          <el-color-picker v-if="item.prop=='orbitalColor'" v-model="scope.row.orbitalColor" show-alpha @change="changeColor(scope.row)"></el-color-picker>
          <span v-else-if="item.prop=='status'" >

            {{scope.row[item.prop]==='0'?'Disable':'Enable'}}
          </span>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="operate" width="250px">
        <template slot-scope="scope">
          <div class="opeItem">
            <span
              class="opeBtn"
              @click="handleEdit(scope.$index, scope.row)">Edit</span>
            <span
              class="opeBtn"
              @click="handleDown(scope.$index, scope.row)">Download</span>
          </div>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "commonTable",
  props: {
    tableData: {
      type: Array,
      default: []
    }

  },
  computed: {},
  data() {
    return {
      tableColumn: [
        {
          label: "NoradNum",
          prop: "noradNumber",
          minWidth:"115px"

        }, {
          label: "Satellite Name",
          prop: "satelliteCode",
          minWidth: "120px"
        }, {
          label: "Inclination",
          prop: "inclination",
          minWidth: "108px"
        },
        {
          label: "longitude of Ascending Node",
          prop: "ascendingLongitude",
          minWidth: "180px",
        }, {
          label: "Eccentricity",
          prop: "ascendingLongitude",
          minWidth: "120px",
        },
        {
          label: "Perigee Argument",
          prop: "perigee",
          minWidth: "145px",
        },
        {
          label: "Perihelion Argument",
          prop: "perihelion",
          minWidth: "160px",
        }, {
          label: "Period Circle",
          prop: "periodCircle",
          minWidth: "110px",
        },
        {
          label: "Width",
          prop: "clothWidth"
        },
        {
          label: "Perihelion Status",
          prop: "status",
          minWidth: "90px",
        },
        {
          label: "Update Time(UTC+8)",
          prop: "updateTime",
          minWidth: "200px"
        }, {
          label: "Orbit color",
          prop: "orbitalColor",
          minWidth: "110px",
        }
      ],
      currentRow: {}
    };
  },
  methods: {
    formateTitleColor(color) {
      return color;
    },
    handleEdit(index, row) {
      this.currentRow = row;
      this.$emit("edit", row);
    },
    handleDown(index, row){
      this.$emit("down", row);
    },
    changeColor(row){
      this.$emit("submit", row);
    }
  }
};
</script>

<style scoped lang="scss">
.table-container {
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 190px);

  // 表格部分样式
  // 最外层透明
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    //border: 1px solid #474D55;
  }

  // 表格内背景颜色
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    height: 5px;
  }
  ::v-deep .el-table td{
    font-size: 13px;
  }

  ::v-deep .el-table tr {
    //border-bottom: 1px solid #474D55 !important;
  }

  ::v-deep .el-table tr:last-child {
    border: none;
  }

  // 去掉最下面的那一条线
  .el-table::before {
    height: 0px;
  }

  // 设置表格行高度
  ::v-deep .el-table__body tr,
  ::v-deep .el-table__body td {
    padding: 0;
    height: 54px;
  }

  // 修改高亮当前行颜色
  ::v-deep .el-table tbody tr:hover > td {
    background: #474D55 !important;
  }

  // 修改表头样式-加边框
  ::v-deep .el-table__header-wrapper {
    border: solid 1px #2C2D32;
  }

  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: solid 1px #474D55;
  }

  // 表格斑马自定义颜色
  ::v-deep .el-table__row.warning-row {
    background-color: rgba(120, 120, 120, 1);
  }

  // 滚动条样式
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: rgba(120, 120, 120, 1);
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: rgba(198, 198, 198, 1);
  }
}

.iconBgColor {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.opeItem {
  display: flex;
  justify-content: center;
  align-items: center;

  .opeBtn {
    display: flex;
    align-items: center;
    width: 78px;
    height: 26px;


    background: rgba(155, 171, 179, 0.35);
    border-radius: 4px;
    justify-content: center;
    margin-right: 15px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      background: rgba(78, 158, 255, 0.35);
      border-radius: 4px;
    }
  }
}
:deep(.el-table th.el-table__cell>.cell){
  font-weight: normal;
}
:deep(.el-color-picker__trigger){
  border: none;
}
</style>
